<div id="content" style="position: relative;min-height: 100%;">
	<div id="fix_overflow" style="overflow: inherit">
		<div class="row s_page_title">
			<sa-big-breadcrumbs [items]="['运输任务','运输任务列表']" icon="fa fa-truck" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
		</div>
		<sa-widgets-grid>
			<div class="s_table">
				<div sa-widget [editbutton]="false" color="darken" class="clearfix">
					<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>运输任务列表</h2></header>
					<div>
						<div class="widget-body no-padding">
							<div class="page-header clearfix s_table_opreation" style="padding-bottom: 0;position: relative;">
								<div class="left page-header-btn">
									<sa-company-tree-car companyTreeId="companyTree" [isShowCarSort]="true" [isLinkCompanyAndCar]='false' (companySelected)="companySelected($event)"></sa-company-tree-car>
									<div class="top_module top_module_box" style="min-width: auto;">
										<span class="top_module_label module_text">装载耗时</span>
										<select name="" class="top_module_select" style="min-width: 110px;" [(ngModel)]="queryForm.loadingTimeType">
											<option value="">全部</option>
											<option value="1">≤10</option>
											<option value="2">≤20</option>
											<option value="3">≤30</option>
											<option value="4">≤40</option>
											<option value="5">≤50</option>
											<option value="6">≤60</option>
											<option value="7">>60</option>
										</select>
									</div>
									<div class="top_module top_module_box" style="min-width: auto;">
										<span class="top_module_label module_text">卸载耗时</span>
										<select name="" class="top_module_select" style="min-width: 110px;" [(ngModel)]="queryForm.unLoadingTimeType">
											<option value="">全部</option>
											<option value="1">≤10</option>
											<option value="2">≤20</option>
											<option value="3">≤30</option>
											<option value="4">≤40</option>
											<option value="5">≤50</option>
											<option value="6">≤60</option>
											<option value="7">>60</option>
										</select>
									</div>
									<div class="top_module top_module_box" style="min-width: auto;">
										<span class="top_module_label module_text">时间类型</span>
										<select name="" class="top_module_select" style="min-width: 110px;" [(ngModel)]="queryForm.dateType">
											<option value="1">进厂时间</option>
											<option value="2">离厂时间</option>
											<option value="3">卸货时间</option>
										</select>
									</div>
									<div class="selectDate top_module">
										<div class="input-daterange input-group s_selected_time_box s_hover_box">
											<input type="text" [(ngModel)]='queryForm.startTime' class="form-control s_selected_time" id="datetimepicker1"  autocomplete="off" placeholder="选择开始时间"/>
											<span class="s_selected_time_spe">至</span>
											<input type="text" [(ngModel)]='queryForm.endTime' class="form-control s_selected_time" id="datetimepicker2"  autocomplete="off" placeholder="选择结束时间"/>
											<div class="s_del_icon" (click)='del_date()'>x</div>
										</div>
									</div>
									<div class="top_module">
										<span class="module_text">选择天数</span>
										<select name="" id="" class="module_inp"  [(ngModel)]="dateNumber" (change)='selectDate()'>
											<option value="">请选择</option>
											<option value="10">近10天[默认]</option>
											<option value="20">近20天</option>
											<option value="30">近30天</option>
											<option value="60">近60天</option>
											<option value="90">近90天</option>
											<option value="100">近100天</option>
										</select>
									</div>
									<div class="selectDate top_module">
										<div class="input-daterange input-group s_selected_time_box s_hover_box">
											<span class="top_module_label module_text" style="margin-bottom: 10px">运输里程(公里)</span>
											<input type="number" [(ngModel)]='queryForm.startTransportation' style="width: 80px !important;" class="form-control s_selected_time" />
											<span class="s_selected_time_spe">至</span>
											<input type="number" [(ngModel)]='queryForm.endTransportation' style="width: 80px !important;" class="form-control s_selected_time" />
											<div class="s_del_icon" (click)='delTransport()'>x</div>
										</div>
									</div>
									<div class="top_module" style="min-width: auto;">
										<span class="top_module_label module_text">排序方式</span>
										<select name="" class="top_module_select" style="min-width: 110px;" [(ngModel)]="queryForm.sortType">
											<option value="">无</option>
											<option value="1">升序</option>
											<option value="2">降序</option>
										</select>
									</div>
									<div class="top_module sort-top_module" style="min-width: auto;height: auto !important;">
										<span class="top_module_label module_text">排序</span>
										<select name="" class="top_module_select" style="min-width: 110px;" id="sortSelect" multiple>
											<option value=""></option>
										</select>
									</div>
									<div style="margin-right: 10px;">
										<div class="layui-form-item" style="display: inline-block; margin-bottom: 0;">
											<div class="layui-inline" style="margin-right: 0">
												<label class="layui-form-label" style="font-size: 12px; padding: 0; width: 50px; line-height: 28px">装载地</label>
												<div style="display: flex" class="select_group--container">
													<select  class="form-control" [(ngModel)]="queryForm.loadingAddressPId" (change)="provinceChange($event.target.value)" name="provinceId" placeholder="请选择省" autocomplete='address-level1'>
														<option value="">请选择</option>
														<option  *ngFor="let item of provinceNameArr" [value]='item.id'>{{item.areaName}}</option>
													</select>
													<select  class="form-control" [(ngModel)]="queryForm.loadingAddressCId" (change)="cityChange($event.target.value)" name="cityId" placeholder="请选择市" autocomplete='address-level2'>
														<option value="">请选择</option>
														<option  *ngFor="let item of cityNameArr" [value]='item.id'>{{item.areaName}}</option>
													</select>
													<select class="form-control" [(ngModel)]="queryForm.loadingAddressId" (change)="townChange($event.target.value)" name="townId" placeholder="请选择区" autocomplete='address-level3'>
														<option value="">请选择</option>
														<option  *ngFor="let item of townNameArr" [value]='item.id'>{{item.areaName}}</option>
													</select>
												</div>
											</div>
										</div>
										<img [src]="transformIcon" style="width: 15px; margin: 0 5px; cursor: pointer" (click)="switchPosition()" />
										<div class="layui-form-item" style="display: inline-block; margin-bottom: 0; margin-right: 10px">
											<div class="layui-inline" style="margin-right: 0">
												<label class="layui-form-label" style="font-size: 12px; padding: 0; width: 50px; line-height: 28px">卸货地</label>
												<div style="display: flex" class="select_group--container">
													<select  class="form-control" [(ngModel)]="queryForm.unloadAddressPId" (change)="provinceChange1($event.target.value)" name="provinceId" placeholder="请选择省" autocomplete='address-level1'>
														<option value="">请选择</option>
														<option  *ngFor="let item of provinceNameArr1" [value]='item.id'>{{item.areaName}}</option>
													</select>
													<select  class="form-control" [(ngModel)]="queryForm.unloadAddressCId" (change)="cityChange1($event.target.value)" name="cityId" placeholder="请选择市" autocomplete='address-level2'>
														<option value="">请选择</option>
														<option  *ngFor="let item of cityNameArr1" [value]='item.id'>{{item.areaName}}</option>
													</select>
													<select class="form-control" [(ngModel)]="queryForm.unloadAddressId" (change)="townChange1($event.target.value)" name="townId" placeholder="请选择区" autocomplete='address-level3'>
														<option value="">请选择</option>
														<option  *ngFor="let item of townNameArr1" [value]='item.id'>{{item.areaName}}</option>
													</select>
												</div>
											</div>
										</div>
										<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
										<button type="button" class="btn btn-primary" (click)="exportTable()">导出</button>
										<button type="button" class="btn btn-primary" (click)="getStaticData(DataModal)">统计</button>
									</div>
								</div>
<!--								<div class="right top-search">-->
<!--&lt;!&ndash;									<input type="text" [(ngModel)]="queryForm.searchKey" (change)="table_search()" class="search-input" placeholder="卸货地址">&ndash;&gt;-->
<!--									<span class="top-search-box">-->
<!--										<button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>-->
<!--									</span>-->
<!--								</div>-->
							</div>
							<div class="table_scroll">
								<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
									<thead>
										<tr>
											<th>订单编号</th>
											<th>车牌号码</th>
											<th>公司名称</th>
											<th>装载重量(吨)</th>
											<th>进场时间</th>
											<th>离场时间</th>
											<th>卸货完成时间</th>
											<th>装载耗时</th>
											<th>卸载耗时</th>
											<th>运输时长</th>
											<th>运输距离(公里)</th>
											<th>卸货地址</th>
											<th>是否返程</th>
										</tr>
									</thead>
									<tbody>
										<tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i" [ngClass]='{selected: activeSelected === row.id }' (dblclick)="rowSelectEvent(row,i)" >
											<td>{{row.orderCode}}</td>
											<td>{{row.carNumber}}</td>
											<td>{{row.companyName}}</td>
											<td>{{row.fullLoadWeight}}</td>
											<td>{{row.emptyLoadTime}}</td>
											<td>{{row.fullLoadTime}}</td>
											<td>{{row.unloadEndTime}}</td>
											<td>{{row.loadingTime}}</td>
											<td>{{row.unloadingTime}}</td>
											<td>{{row.transportationTime}}</td>
											<td>{{row.transportationRange}}</td>
											<td>{{row.address}}</td>
											<td>{{row.isReturnBack === 0 ? '否' : '是'}}</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="table-fix clearfix">
								<paginator [totalRecords]="totalCount"
							           [rows]="pageSize"
							           [currentPage]="curPage - 1"
							           (onPageChange)="paginate($event)">
								</paginator>
								<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</sa-widgets-grid>
		<section bsModal #DataModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg" style="width: 1200px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" (click)="imgClose(DataModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">数据统计</h4>
					</div>
					<div class="modal-body" style="padding: 0 20px 20px 20px">
						<table class="data-table">
							<tr>
								<td class="data-table_label">运载重量</td>
								<td>{{statisticsForm.allWeight}} 吨</td>
								<td class="data-table_label">运载里程</td>
								<td>{{statisticsForm.allMileage}} 公里</td>
								<td class="data-table_label">运载次数</td>
								<td>{{statisticsForm.allTime}} 次</td>
							</tr>
							<tr>
								<td class="data-table_label">运载车辆(罐装车、袋装车)</td>
								<td>{{statisticsForm.allCarNum}}({{statisticsForm.allSanCarNum}}、{{statisticsForm.allDaiCarNum}}) 辆</td>
								<td class="data-table_label">平均每次运载重量</td>
								<td>{{statisticsForm. avgWeightByTime}} 吨/次</td>
								<td class="data-table_label">平均每次运载里程</td>
								<td>{{statisticsForm.avgMileageByTime}} 公里/次</td>
							</tr>
							<tr>
								<td class="data-table_label">平均每车运载频次</td>
								<td>{{statisticsForm.avgCarByTime}} 次/辆</td>
								<td class="data-table_label">平均每车运载重量</td>
								<td>{{statisticsForm.avgWeightByCar}} 吨/车</td>
								<td class="data-table_label">平均每车运载里程</td>
								<td>{{statisticsForm.avgMileageByCar}} 公里/车</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</section>
		<div id="popPage">
			<div *ngIf='isloading' class="loadImg"><img src="assets/img/loading-0.gif"/></div>
			<div class="popHeader">
				<span class="header_title">详细信息</span>
				<i class="fa fa-times close_icon" (click)="colsePop()"></i>
			</div>
			<div id="popContent">
				<div class="chartBox" style="height: 35%;padding-bottom:12px;">
					<div style="border:1px solid #ccc;height: 100%;border-radius: 5px;position: relative;">
						<div class="inCheck" onselectstart="return false">
				       		<label class="checkbox-inline" style="font-weight: normal;">
								<input  type="checkbox"  class="checkbox isEnter"  [(ngModel)]='isEnter' (change)="isEnterChange()" />
					            <span  style="margin-left: 0;font-weight: normal;">特价区</span>
					       	</label>
						</div>
						<div id="myChart" style="height: 100%;width: 100%;"></div>
					</div>
				</div>
				
				
				<div class="mapBox" style="height: 35%;padding: 8px;border:1px solid #ccc;border-radius: 5px;" >
					<div class="map-box" style="height: 100%;width: 100%;"> 
						<div id="baiduMap" style="height: 100%;width: 100%;"></div>
						<sa-bmap-tools [baiduMap]="baiduMap" [isShowZoom]="true"></sa-bmap-tools>
					</div>
					
				</div>
				<div class="mapBox" style="height: 20%;padding: 12px 0;" > 
					<div style="overflow: auto;border:1px solid #ccc;padding: 8px 0;border-radius: 5px;height: 100%;" class="row">
						<p class="col-xs-12" style="font-size: 15px;font-weight: bold;line-height: 24px;">基本信息</p>
						<div *ngFor="let item of basInformation" class="col-xs-4" style="line-height: 24px;min-width: 180px;font-size: 12px;display: inline-block;padding-left: 12px;">
							<span >{{item.textStr}}<span> : {{item.value}}</span></span>
						</div>
					</div>
				</div>
				<div class="mapBox" style="height: 10%;"></div>
				
				<div class="pop_button" (click)="isShow()">
		  			<img src="assets/img/side_arrow.png" id = 'rotate' />
		  		</div>
				
			</div>

		</div>
	</div>
</div>

